<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title><{:C('site_title')}></title>
<!--公用css-->
<link rel="stylesheet" type="text/css" href="<{:STATICS}>/centaurus/css/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="<{:STATICS}>/centaurus/css/libs/font-awesome.css"/>
<link rel="stylesheet" type="text/css" href="<{:STATICS}>/centaurus/css/libs/nanoscroller.css"/>
<link rel="stylesheet" type="text/css" href="<{:STATICS}>/centaurus/css/compiled/theme_styles.css"/>
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/libs/fullcalendar.css" type="text/css"/>
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/libs/fullcalendar.print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/compiled/calendar.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/libs/morris.css" type="text/css"/>
<link rel="stylesheet" href="<{:STATICS}>/centaurus/css/libs/daterangepicker.css" type="text/css"/>
<link rel="stylesheet" href="<{:STATICS}>/css/jquery-ui.min.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="<{:RES}>/css/style.css"/>

<!--公用js-->
<!--[if lt IE 9]>
<script src="<{:STATICS}>/centaurus/js/html5shiv.js"></script>
<script src="<{:STATICS}>/centaurus/js/respond.min.js"></script>
<![endif]-->
<script src="<{:STATICS}>/centaurus/js/jquery.js"></script> 
<script src="<{:STATICS}>/centaurus/js/bootstrap.js"></script> 
<script src="<{:STATICS}>/centaurus/js/skin-changer.js"></script> 

<script src="<{:STATICS}>/centaurus/js/jquery.nanoscroller.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/jquery-ui.custom.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/fullcalendar.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/jquery.slimscroll.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/raphael-min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/morris.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/moment.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/daterangepicker.js"></script> 
<script src="<{:STATICS}>/centaurus/js/gdp-data.js"></script> 
<script src="<{:STATICS}>/centaurus/js/flot/jquery.flot.js"></script> 
<script src="<{:STATICS}>/centaurus/js/flot/jquery.flot.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/flot/jquery.flot.pie.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/flot/jquery.flot.stack.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/flot/jquery.flot.resize.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/flot/jquery.flot.time.min.js"></script> 
<script src="<{:STATICS}>/centaurus/js/flot/jquery.flot.threshold.js"></script> 
<script src="<{:STATICS}>/centaurus/js/jquery.countTo.js"></script> 
<script src="<{:STATICS}>/centaurus/js/scripts.js"></script> 
<script src="<{:STATICS}>/centaurus/js/pace.min.js"></script> 

<script type="text/javascript" src="<{:STATICS}>/js/jquery.artDialog.js?skin=aero"></script>
<script type="text/javascript" src="<{:STATICS}>/js/iframeTools.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.form.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.cookie.js"></script>
<script src="<{:RES}>/js/common.js"></script>
</head>
<body>

<div id="theme-wrapper">
	<header class="navbar" id="header-navbar">
		<div class="container">
			<a href="<{:U('Home/index/index')}>" id="logo" class="navbar-brand"><img src="<{:STATICS}>/centaurus/img/logo.png" class="normal-logo logo-white"/> <img src="<{:STATICS}>/centaurus/img/logo-black.png" class="normal-logo logo-black"/> <img src="<{:STATICS}>/centaurus/img/logo-small.png" class="small-logo hidden-xs hidden-sm hidden"/> </a>

			<div class="clearfix">
				<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-bars"></span> </button>
				<div class="nav-no-collapse navbar-left pull-left hidden-sm hidden-xs">
					<ul class="nav navbar-nav pull-left">
						<li> <a class="btn" id="make-small-nav"> <i class="fa fa-bars"></i> </a> </li>
					</ul>
				</div>
				<div class="nav-no-collapse pull-right" id="header-nav">
					<ul class="nav navbar-nav pull-right">
					    <li id="sys-con" class="dropdown hidden-xs"> <a class="btn dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-warning"></i> <span class="count" id="sysMsgNum"></span> </a>
							<ul class="dropdown-menu notifications-list" id="sys-msg"></ul>
						</li>
						<li id="email-con" class="dropdown hidden-xs"> <a class="btn dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-envelope-o"></i> <span class="count" id="emailNum"></span> </a>
							<ul class="dropdown-menu notifications-list messages-list" id="email-msg"></ul>
						</li>

						<!--li class="hidden-xs"> <a href="<{:U('Profile/index')}>" class="btn"> <i class="fa fa-cog"></i> </a> </li-->

						<li class="dropdown profile-dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<img src="<{$user['face']|getFace=###}>" />
							<span class="hidden-xs"><{$user['nickname']|default=$userName}></span> <b class="caret"></b>
							</a>
							<ul class="dropdown-menu">
								<li><a href="<{:U('Profile/index')}>"><i class="fa fa-user"></i>Profile</a></li>
								<li><a href="<{:U('Profile/setpsd')}>"><i class="fa fa-key"></i>Reset password</a></li>
								<li><a href="<{:U('Logout/index')}>"><i class="fa fa-power-off"></i>Logout</a></li>
							</ul>
						</li>

						<li class="hidden-xxs"> <a href="<{:U('Logout/index')}>" class="btn"> <i class="fa fa-power-off"></i> </a> </li>
					</ul>
				</div>
			</div>
		</div>
	</header>

	<div id="page-wrapper" class="container">
		<div class="row <eq name="userBasic" value="0">baseUser</eq>">
			<div id="nav-col">
				<section id="col-left" class="col-left-nano">
					<div id="col-left-inner" class="col-left-nano-content">
						<div id="user-left-box" class="clearfix hidden-sm hidden-xs"> <img src="<{$user['face']|getFace=###}>" style="width:80px; height:80px;"/>
							<div class="user-box"> <span class="name"> Welcome<br/>
								<{$user['nickname']|default=$userName}> </span>
							</div>
						</div>
						<div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar-nav">
							<ul class="nav nav-pills nav-stacked">
								<li><a href="<{:U('Index/index')}>"> <i class="fa fa-dashboard"></i> <span>Dashboard</span> </a>
								</li>

								<!-- <li><a href="<{:U('Mentors/index')}>"> <i class="fa fa-search"></i> <span>Find mentors</span></a></li> -->	
	
								<li> <a href="#" class="dropdown-toggle"> <i class="fa fa-user"></i> <span>My mentors</span> <i class="fa fa-chevron-circle-right drop-icon"></i> </a>
									<ul class="submenu">
										<!-- <li> <a href="<{:U('Request/index')}>"> Request </a> </li> -->
										<li> <a href="<{:U('Mentors/learning')}>"> Learning </a> </li>
										<li> <a href="<{:U('Mentors/graduation')}>"> Graduation </a> </li>
									</ul>
								</li>								
								<!-- <li><a href="<{:U('Need/index')}>"> <i class="fa fa-list"></i> <span>My need</span></a></li> -->	
								<li><a href="<{:U('Plan/index')}>"> <i class="fa fa-table"></i> <span>Training plan</span></a></li>

								<li> <a href="#" class="dropdown-toggle"> <i class="fa fa-envelope"></i> <span>Message</span> <i class="fa fa-chevron-circle-right drop-icon"></i> </a>
									<ul class="submenu">
										<li> <a href="<{:U('Message/index')}>"> Email </a> </li>
										<li> <a href="<{:U('Message/system')}>"> System </a> </li>
									</ul>
								</li>

								<li><a href="<{:U('Appointment/index')}>"> <i class="fa fa-edit"></i> <span>Appointment</span></a></li>

								<li><a href="<{:U('Chat/index')}>"> <i class="fa fa-comment-o"></i> <span>Chat</span></a></li>

								<li><a href="<{:U('Plan/index')}>"> <i class="fa fa-money"></i> <span>Finance</span></a></li>
								<li><a href="<{:U('Events/index')}>"> <i class="fa fa-bar-chart-o"></i> <span>Events</span></a></li>
								<li><a href="<{:U('Job/index')}>"> <i class="fa fa-desktop"></i> <span>New job</span></a></li>
							</ul>
						</div>
					</div>
				</section>
			</div>

			<div id="content-wrapper">
				
				{__CONTENT__}

				<footer id="footer-bar" class="row">
					<p id="footer-copyright" class="col-xs-12"> &copy; 2015 <a href="<{:C('site_url')}>" target="_blank">Mentoring</a>. Powered by Alex. </p>
				</footer>
			</div>
		</div>
	</div>
</div>

<div id="config-tool" class="closed"> <a id="config-tool-cog"> <i class="fa fa-cog"></i> </a>
	<div id="config-tool-options">
		<h4>Layout Options</h4>
		<ul>
			<li>
				<div class="checkbox-nice">
					<input type="checkbox" id="config-fixed-header"/>
					<label for="config-fixed-header"> Fixed Header </label>
				</div>
			</li>
			<li>
				<div class="checkbox-nice">
					<input type="checkbox" id="config-fixed-sidebar"/>
					<label for="config-fixed-sidebar"> Fixed Left Menu </label>
				</div>
			</li>
			<li>
				<div class="checkbox-nice">
					<input type="checkbox" id="config-fixed-footer"/>
					<label for="config-fixed-footer"> Fixed Footer </label>
				</div>
			</li>
			<li>
				<div class="checkbox-nice">
					<input type="checkbox" id="config-boxed-layout"/>
					<label for="config-boxed-layout"> Boxed Layout </label>
				</div>
			</li>
			<!-- <li>
				<div class="checkbox-nice">
					<input type="checkbox" id="config-rtl-layout"/>
					<label for="config-rtl-layout"> Right-to-Left </label>
				</div>
			</li> -->
		</ul>
		<br/>
		<h4>Skin Color</h4>
		<ul id="skin-colors" class="clearfix">
			<li> <a class="skin-changer" data-skin="" data-toggle="tooltip" title="Default" style="background-color: #34495e;"> </a> </li>
			<li> <a class="skin-changer" data-skin="theme-white" data-toggle="tooltip" title="White/Green" style="background-color: #2ecc71;"> </a> </li>
			<li> <a class="skin-changer blue-gradient" data-skin="theme-blue-gradient" data-toggle="tooltip" title="Gradient"> </a> </li>
			<li> <a class="skin-changer" data-skin="theme-turquoise" data-toggle="tooltip" title="Green Sea" style="background-color: #1abc9c;"> </a> </li>
			<li> <a class="skin-changer" data-skin="theme-amethyst" data-toggle="tooltip" title="Amethyst" style="background-color: #9b59b6;"> </a> </li>
			<li> <a class="skin-changer" data-skin="theme-blue" data-toggle="tooltip" title="Blue" style="background-color: #2980b9;"> </a> </li>
			<li> <a class="skin-changer" data-skin="theme-red" data-toggle="tooltip" title="Red" style="background-color: #e74c3c;"> </a> </li>
			<li> <a class="skin-changer" data-skin="theme-whbl" data-toggle="tooltip" title="White/Blue" style="background-color: #3498db;"> </a> </li>
		</ul>
	</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h4 class="modal-title"></h4>
			</div>
			<div class="modal-body">
				<div class="loading"><i class="fa fa-spinner fa-spin fa-4x"></i></div>
			</div>
		</div>
	</div>
</div>

<div class="modal fade" id="alertModal" tabindex="-1" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-body">
				<div class="loading"><i class="fa fa-spinner fa-spin fa-4x"></i></div>
			</div>
		</div>
	</div>
</div>

<div class="md-overlay"></div> 
</body>
</html>

<script type="text/javascript">
$(function(){
getEmailMsg();
getSysMsg();
getChatMsgLoop();
});
function getEmailMsg(){
	$.ajax({ 
       url : '<{:U("Index/getEmailMsg")}>',
       type : 'get', 
       timeout : 0, 
       success : function(txt){
			if(txt.status=="SUCCESS"){
				if(txt.total>0){
					$("#email-con").css("display","block")
					$("#emailNum").text(txt.total);
					var data=txt.data;
					var html="";
					if(data.length>3){
						var len=3;
					}else{
						var len=data.length;
					}
					html+='<li class="pointer"><div class="pointer-inner"><div class="arrow"></div></div></li>';
					for (var i = 0; i < len; i++) {
						html+='<li class="item first-item"> <a href="/index.php?m=Mentees&c=Message&a=view&id='+data[i].id+'"> <img style="width:30px; height:30px;border-radius:50%;" src="'+data[i].fromFace+'" /> <span class="content"> <span class="content-headline">'+data[i].fromName+'</span> <span class="content-text">'+data[i].title+'</span></span> <span class="time"><i class="fa fa-clock-o"></i>'+data[i].createTime+'</span> </a> </li>'
					}
					html+='<li class="item-footer" id="email-num-footer"> <a href="<{:U('Message/index')}>"> View all messages </a> </li>';
					$("#email-msg").html(html);

				}else{
					$("#email-con").css("display","none");
				}
			}
       },
       complete : function(){
           setTimeout(function(){getEmailMsg();}, 5000); 
       } 
   }) 
}

function getSysMsg(){
	$.ajax({ 
       url : '<{:U("Index/getSysMsg")}>',
       type : 'get', 
       timeout : 0, 
       success : function(txt){
			if(txt.status=="SUCCESS"){
				if(txt.total>0){
					$("#sys-con").css("display","block")
					$("#sysMsgNum").text(txt.total);
					var data=txt.data;
					var html="";
					if(data.length>5){
						var len=5;
					}else{
						var len=data.length;
					}
					html+='<li class="pointer"><div class="pointer-inner"><div class="arrow"></div></div></li>';
					html+='<li class="item-header">You have '+txt.total+' new system messages</li>';
					for (var i = 0; i < len; i++) {
						html+='<li class="item"><a href="/index.php?m=Mentors&c=Message&a=view&id='+data[i].id+'"><span class="content">'+data[i].title+'</span> <span class="time"><i class="fa fa-clock-o"></i>'+data[i].createTime+'</span> </a> </li>';
					}
					html+='<li class="item-footer" id="email-num-footer"> <a href="<{:U('Message/system')}>"> View all system messages </a> </li>';
					$("#sys-msg").html(html);

				}else{
					$("#sys-con").css("display","none");
				}
			}
       },
       complete : function(){
           setTimeout(function(){getSysMsg();}, 5000); 
       } 
   }) 
}

//获取及时聊天
function getChatMsgLoop(){
	var endID=parseInt($.cookie('chatMsgEndID'));
	$.ajax({ 
       url : '<{:U("Index/getChatMsgLoop")}>',
       type : 'get', 
       timeout : 0, 
       success : function(txt){
			if(txt.status=="SUCCESS"){
				var data=txt.data;
				if(data){
					if(isNaN(endID) || endID!=data.id){
						$.cookie('chatMsgEndID',data.id);
						var html="<a href='javascript:;' onclick='chat("+data.fromID+")'>You have new messages, click view!</a>";
						art.dialog.notice({
						    title: 'Chat',
						    width: 220,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
						    content: html,
						    icon: 'face-smile',
						    time: 10
						});
					}
				}
			}
       },
       complete : function(){
           setTimeout(function(){getChatMsgLoop();}, 3000); 
       } 
   }) 
}
</script>